<template>
  <div class="app-container">
    <div class="customContainer">
      <div class="customHeader">
        <div class="bottom_box_total">
          <div style="margin-bottom:10px">盘盈盘亏明细表</div>
          <div >
            <span style="margin-left:6px"> 门店：{{store_name}}</span>
            <span v-if="house_name" style="margin-left:10px"> {{house_name==null?'': '店内仓名称：' + house_name}}</span>
            <span style="margin-left:10px">本次盘点时间：{{nowtime}}</span>
            <span style="margin-left:10px">上次盘点时间：{{lasttime}}</span>
          </div>

        </div>
        <!-- <div>
          <b>{{house_name==null?store_name:house_name}}</b>-盘盈、盘亏明细
          <span>&#x3000;&#x3000;&#x3000;上次时间:
            <b>{{lasttime}}</b>&#x3000;本次时间:
            <b>{{nowtime}}</b>
          </span>
        </div> -->
      </div>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号">
          <template slot-scope="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column v-if="formInline.warehouse==3" align="center" label='机台号' width="60">
          <template slot-scope="scope">
            {{scope.row.area_name}}-{{scope.row.mno}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="礼品图片" width="80">
          <template slot-scope="scope">
            <img :src="scope.row.thumb" width="60" height="60" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label='礼品名称' prop="gift_name"></el-table-column>
        <el-table-column align="center" label="神采编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label="礼品编号" prop="gift_id"></el-table-column>
        <el-table-column align="center" label="上次盘点库存" prop="lastStock"></el-table-column>
        <el-table-column align="center" label="本次账面库存" prop="thisTheory"></el-table-column>
        <el-table-column align="center" label="本次盘点库存" prop="thisActual"></el-table-column>
        <el-table-column align="center" label='礼品成本价'>
          <template slot-scope="scope">
            <!-- 保留小数 -->
            {{scope.row.money_cost|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="盘盈数量" prop="checkMore"></el-table-column>
        <el-table-column align="center" label="盘亏数量" prop="checkLess"></el-table-column>
        <el-table-column align="center" label="盘盈金额（元）" prop="money_more"></el-table-column>
        <el-table-column align="center" label="盘亏金额（元）" prop="money_less"></el-table-column>
        <el-table-column align="center" label="备注" prop="remark"></el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box" v-if="list">
      <!-- <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination> -->
      <!-- <el-button class="pull-right" type="primary" size="small" @click="exportClick()" :loading="exportLoading">报表导出
        <count-down ref="cd" />
      </el-button>  -->
      <span class="pull-right mt10" style="font-size:14px;color:#606266">　盘盈金额合计（元）：{{totle.moneyMore}}　盘亏金额合计（元）：{{totle.moneyLess}}&#x3000;&#x3000;</span>
    </div>
  </div>
</template>

<script>
import { getList, getPage, getExport } from '@/api/storage_control/checkDetail_form';
export default {
  data() {
    return {
      exportLoading: false,
      totle: {},
      store_name: '',
      house_name: '',
      lasttime: '',
      nowtime: '',
      list: null,
      listLoading: false,
      currentPage: 1,
      totalDataNumber: 0,
      is_detail: true,
      houseList: [],
      formInline: {
        store_id: '',
        house_id: '',
        time: ''
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (vm.$route.params.store_id) {
        vm.formInline.store_id = vm.$route.params.store_id;
        vm.formInline.house_id = vm.$route.params.house_id;
        vm.formInline.time = vm.$route.params.time;
        vm.fetchData();
      }
    });
  }, 
  methods: {
    // 导出
    exportClick() {
      getExport(this.formInline);
      this.exportLoading = true;
      this.$refs.cd.countDownF(30).then(() => {
        this.exportLoading = false;
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      getList(this.formInline)
        .then(response => {
          // debugger
          this.totle = response.totle;
          this.store_name = response.store_name;
          this.house_name = response.house_name;
          this.lasttime = response.lasttime;
          this.nowtime = response.nowtime;
          this.list = response.data;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    } 
  }
};
</script>

<style scoped>
.bottom_box_total {
  font-size: 14px;
  color: #606266;
}
</style>